<script setup lang="ts">
import SceneCard from '@/views/MicroScene/home/components/Card/SceneCard.vue';
import SceneCreateModal from '@/views/MicroScene/home/components/Modal/SceneCreateModal.vue';
import { onMounted, ref, watch } from 'vue';
import { Empty } from 'ant-design-vue';
import { fetchAreaSceneTagsApi, fetchAreaScenesApi } from '@/api/MicroScene/MicroSceneApi';
import type { AreaScene } from '@/types/micro-scene';

const props = defineProps<{
  areaId: string;
}>();

const sceneFilters = ref<string[]>([]);
const selectedFilter = ref<string>('全部');
const areaId = ref<number>(Number(props.areaId));
const query = ref<string>('');
const pageIndex = ref<number>(1);
const pageSize = 12;
const scenes = ref<AreaScene[]>([]);
const createModalOpen = ref<boolean>(false);

const fetchAreaSceneTags = async () => {
  const tags = await fetchAreaSceneTagsApi(props.areaId);
  sceneFilters.value = ['全部', ...tags];
}

const fetchAreaScenes = async () => {
  const params = {
    areaId: areaId.value,
    keyword: query.value,
    tag: selectedFilter.value === '全部' ? '' : selectedFilter.value,
    page: pageIndex.value,
    size: pageSize,
  }
  const res = await fetchAreaScenesApi(params);
  scenes.value = res.records || [];
}

// 刷新数据
const refreshData = async () => {
  await fetchAreaSceneTags();
  await fetchAreaScenes();
};

const onFilterBtnClicked = async (filter: string) => {
  selectedFilter.value = filter;
  pageIndex.value = 1;
  await refreshData();
};

// 监听 props.areaId 的变化
watch(
  () => props.areaId,
  (newAreaId) => {
    areaId.value = Number(newAreaId);
    // 重置分页和筛选条件
    pageIndex.value = 1;
    selectedFilter.value = '全部';
    query.value = '';
    // 重新获取数据
    refreshData();
  },
);

onMounted(async () => {
  await refreshData();
});
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; border-radius: 0.5rem; background-color: transparent;">
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
      <span style="font-size: 2rem; font-weight: bold; color: rgb(34, 95,245); position: relative; width: fit-content;">
        微场景创设
        <img
          src="@/assets/title_star.svg"
          alt="微场景创设"
          style="width: 1.5rem; height: 1.5rem; position: absolute; right: -2rem;"
        >
      </span>

      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <a-input-search
          v-model:value="query"
          placeholder="请输入关键词搜索"
          style="width: 20rem;"
          @search="fetchAreaScenes"
        />
        <a-button type="primary" style="font-size: 14px; border: none;" @click="createModalOpen = true">
          发布微场景
        </a-button>
      </div>
    </div>

    <a-flex style="flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0rem 0rem 0rem;">
      <a-button
        v-for="option in sceneFilters"
        :key="option"
        :type="option === selectedFilter ? 'primary' : 'default'"
        style="font-size: 14px; border: none;"
        @click="onFilterBtnClicked(option)"
      >
        {{ option }}
      </a-button>
    </a-flex>

    <!-- 活动列表 -->
    <div style="margin-top: 1rem;">
      <template v-if="scenes.length > 0">
        <a-row :gutter="[8, 8]">
          <a-col v-for="scene in scenes" :key="scene.sceneId" :span="12">
            <SceneCard :scene="scene" @refresh="refreshData" />
          </a-col>
        </a-row>
      </template>
      <template v-else>
        <a-empty
          :image="Empty.PRESENTED_IMAGE_SIMPLE"
          description="当前专区暂无微场景"
          style="margin-top: 4rem;"
        />
      </template>
    </div>

    <SceneCreateModal
      :open="createModalOpen"
      :area-id="props.areaId"
      @change-open-state="createModalOpen = $event"
      @success="refreshData"
    />
  </a-layout>
</template>

<style lang="scss" scoped>
</style>
